<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no, email=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #div1 > button, #div2 > button {
            width: 80px;
            height: 30px;
        }

        #div1 > div, #div2 > div {
            width: 300px;
            height: 200px;
            border: 1px solid #000;
            display: none;
        }

        #div1 > button.active, #div2 > button.active {
            background-color: #e6578a;
        }

        #div1 > div.active, #div2 > div.active {
            display: block;
        }
    </style>
</head>
<body>
<div id="div1">
    <button class="active">按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <div class="active">内容1</div>
    <div>内容2</div>
    <div>内容3</div>
</div>
</body>
<script>
    window.onload = function () {

        var t1 = new Tab("#div1");
        t1.init();
        var t1 = new Tab("#div2");
        t1.init();

    };

    function Tab(id) {
        this.oDiv = document.querySelector(id);
        this.aBtn = this.oDiv.querySelectorAll("button");
        this.aDiv = this.oDiv.querySelectorAll("div");
    }

    Tab.prototype.init = function () {
        for (var i = 0; i < this.aBtn.length; i++) {
            this.aBtn[i].index = i;
            var This = this;
            this.aBtn[i].onclick = function () {
                This.changeTab(this)
            }
        }
    };

    Tab.prototype.changeTab = function (oBtn) {
        for (var i = 0; i < this.aBtn.length; i++) {
            this.aBtn[i].className = "";
            this.aDiv[i].style.display = "none"
        }
        oBtn.className = "active";
        this.aDiv[oBtn.index].style.display = "block"
    }
</script>
</html>